<template>
  <div class="personal-main">

    <!-- 还款计划 -->
    <div v-if="userIndexVO.userType === 2" class="item-detail-body clearfix mrt30 ui-tab">
      <div class="ui-tab-nav hd">
        <ul>
          <li class="nav_li active">
            <a href="javascript:;">还款计划</a>
          </li>
        </ul>
      </div>
      <div class="bd">
        <div class="ui-tab-item active" style="display: block;">
          <div class="repayment-list">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <thead>
              <tr>
                <th>还款期数</th>
                <th>还款日期</th>
                <th>应还本金(元)</th>
                <th>应还利息(元)</th>
                <th>状态</th>
                <th>是否逾期</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody id="repayment_content">
              <tr v-for="lendReturn in lendReturnList" :key="lendReturn.id">
                <td>{{ lendReturn.currentPeriod }}</td>
                <td>{{ lendReturn.returnDate }}</td>
                <td class="c-orange">￥{{ lendReturn.principal }}</td>
                <td class="c-orange">￥{{ lendReturn.interest }}</td>
                <td>{{ lendReturn.status === 0 ? "未还款" : "已还款" }}
                <td>
                    <span v-if="lendReturn.overdue">
                      是（逾期金额：{{ lendReturn.overdueTotal }}元）
                    </span>
                  <span v-else>否</span>
                </td>
                <td>
                  <a href="javascript:" @click="commitReturn(lendReturn.id)">
                    {{ lendReturn.status === 0 ? "还款" : "" }}
                  </a>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 回款计划 -->
    <div v-if="userIndexVO.userType === 1" class="item-detail-body clearfix mrt30 ui-tab">
      <div class="ui-tab-nav hd">
        <ul>
          <li class="nav_li active">
            <a href="javascript:;">回款计划</a>
          </li>
        </ul>
      </div>
      <div class="bd">
        <div class="ui-tab-item active" style="display: block;">
          <div class="repayment-list">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <thead>
              <tr>
                <th>期数</th>
                <th>本金(元)</th>
                <th>利息(元)</th>
                <th>本息(元)</th>
                <th>计划回款日期</th>
                <th>实际回款日期</th>
                <th>状态</th>
                <th>是否逾期</th>
              </tr>
              </thead>
              <tbody id="repayment_content">
              <tr
                v-for="lendItemReturn in lendItemReturnList" :key="lendItemReturn.id">
                <td>{{ lendItemReturn.currentPeriod }}</td>
                <td class="c-orange">￥{{ lendItemReturn.principal }}</td>
                <td class="c-orange">￥{{ lendItemReturn.interest }}</td>
                <td class="c-orange">￥{{ lendItemReturn.total }}</td>
                <td>{{ lendItemReturn.returnDate }}</td>
                <td>{{ lendItemReturn.realReturnTime }}</td>
                <td>
                  {{ lendItemReturn.status === 0 ? "未还款" : "已还款" }}
                </td>
                <td>
                    <span v-if="lendItemReturn.overdue">
                      是（逾期金额：{{ lendReturn.overdueTotal }}元）
                    </span>
                  <span v-else>否</span>
                </td>
                
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  name: "payment",
  data() {
    return {
      userIndexVO: {},  // 个人信息集合
      lendItemReturnList: [],
      lendReturnList:[], 
      userType:'',
    }
  },

  // 生命周期
  created() {
    // 个人空间信息
    this.fetchUserData()
    
    // 回款计划
    this.fetchLendItemReturnList();
  },

  // 方法
  methods: {
    // 还款
    commitReturn(lendReturnId) {
      // 跳转到还款平台
      this.$alert(
        "<div style=\"size: 18px;color: red;\">您即将前往汇付宝确认还款</div>",
        "前往汇付宝资金托管平台",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "立即前往",
          callback: (action) => {
            console.log("打印==>>", action);
            if (action === "confirm") {
              this.$axios.$post("/api/core/lendReturn/auth/commitReturn/" + lendReturnId).then((response) => {
                document.write(response.data.formStr);
                console.log("打印出formStr==>>>", response.data.formStr);
              });
            }
          }
        }
      );
    },
    // 查询个人空间
    fetchUserData() { 
      this.$axios.$get('/api/core/userInfo/auth/getIndexUserInfo').then((response) => {
        this.userIndexVO = response.data.userIndexVO
      })
    },

    // 回款计划查询
    fetchLendItemReturnList() {
      this.$axios.$get("/api/core/userInfo/auth/getUserType").then(res =>{
        this.userType = res.data.userType
        console.log("打印"+this.userType)
        if(this.userType === 1){
        this.$axios.$get("/api/core/lendItemReturn/auth/list").then((response) => {
        console.log("打印", response.data);
        this.lendItemReturnList = response.data.list;    
      });
      }else if(this.userType === 2){
        this.$axios.$get("/api/core/lendReturn/list").then(response =>{
        this.lendReturnList = response.data.list
        console.log(this.lendItemReturnList);
      })
      }
      })
      
    },
    // 还款计划查询
    // fetchLendItemReturnList(){
    //   this.$axios.$get("/api/core/lendReturn/list").then(response =>{
    //     this.lendItemReturnList = response.data.list
    //   })
    // }

  },
};
</script>

<style scoped>

</style>
